import React, { useEffect, useState } from "react";
import {
  HomeOutlined,
  ControlOutlined,
  NodeIndexOutlined,
  FileDoneOutlined,
  UserOutlined,
} from "@ant-design/icons";
import { CouponO, Logistics } from "@react-vant/icons";
import { NavLink, Outlet } from "react-router-dom";
import type { MenuProps } from "antd";
import { Layout, Menu, theme } from "antd";
import { useDispatch, useSelector } from "react-redux";
import axios from "axios";
// 面包屑
import { Breadcrumb } from "antd";
import { Link, useLocation, useNavigate } from "react-router-dom";
const { Header, Content, Footer, Sider } = Layout;
type MenuItem = Required<MenuProps>["items"][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[]
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const items: MenuItem[] = [
  getItem(<NavLink to="/index/home">首页</NavLink>, "1", <HomeOutlined />),
  getItem(
    <NavLink to="/index/trainNumber">车次管理</NavLink>,
    "2",
    <Logistics />
  ),
  getItem(
    <NavLink to="/index/station">车站管理</NavLink>,
    "3",
    <UserOutlined />
  ),
  getItem(
    <NavLink to="/index/line">线路管理</NavLink>,
    "4",
    <ControlOutlined />
  ),
  getItem(<NavLink to="/index/ticket">车票管理</NavLink>, "5", <CouponO />),
  getItem(
    <NavLink to="/index/order">订单管理</NavLink>,
    "6",
    <FileDoneOutlined />
  ),
  getItem(
    <NavLink to="/index/order">个人轨迹监控</NavLink>,
    "7",
    <NodeIndexOutlined />
  ),
  //   getItem("Team", "sub2", <TeamOutlined />, [
  //     getItem("Team 1", "6"),
  //     getItem("Team 2", "8"),
  //   ]),
  //   getItem("Files", "9", <FileOutlined />),
];

const App: React.FC = () => {
  const dispatch = useDispatch();
  // 获取数据
  useEffect(() => {
    axios.get("/api/trainNumber").then((res) => {
      if (res.status == 200) {
        console.log(res.data);
        dispatch({
          type: "GET-LIST",
          payload: res.data,
        });
      }
    });
    axios.get("/api/line").then((res) => {
      if (res.status == 200) {
        console.log(res.data);
        dispatch({
          type: "GET-LINEDATA",
          payload: res.data,
        });
      }
    });
    axios.get("/api/ticket").then((res) => {
      if (res.status == 200) {
        console.log(res.data);
        dispatch({
          type: "GET-TICKET",
          payload: res.data,
        });
      }
    });
  }, []);
  const nav = useNavigate();
  useEffect(() => {
    let token = window.localStorage.getItem("token");
    if (!token) {
      nav("/login");
    } else {
    }
  });
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  // 面包屑
  const breadcrumbNameMap: Record<string, string> = {
    "/index": "",
    "/index/home": "首页",
    "/index/trainNumber": "车次管理",
    "/index/station": "车站管理",
    "/index/line": "线路管理",
    "/index/trainNumber/add": "/新建车次",
  };
  const location = useLocation();
  const pathSnippets = location.pathname.split("/").filter((i) => i);

  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join("/")}`;
    return {
      key: url,
      title: <Link to={url}>{breadcrumbNameMap[url]}</Link>,
    };
  });

  const breadcrumbItems = [
    {
      title: <Link to="/index/home"></Link>,
      key: "index",
    },
  ].concat(extraBreadcrumbItems);

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value: any) => setCollapsed(value)}
      >
        <div
          style={{
            height: 32,
            margin: 16,
            background: "rgba(255, 255, 255, 0.2)",
          }}
        />
        <Menu
          theme="dark"
          defaultSelectedKeys={["1"]}
          mode="inline"
          items={items}
        />
      </Sider>
      <Layout className="site-layout">
        <Header style={{ margin: "0 16px", background: colorBgContainer }}>
          <Breadcrumb style={{ margin: "16px" }}>
            <Breadcrumb items={breadcrumbItems} />
          </Breadcrumb>
        </Header>
        <Content style={{ margin: "20px 16px" }}>
          <div
            style={{
              padding: 24,
              minHeight: 600,
              //   background: colorBgContainer,
            }}
          >
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer style={{ textAlign: "center" }}>
          Ticket platform ©2023 Created by bw
        </Footer>
      </Layout>
    </Layout>
  );
};

export default App;
